<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加群组</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/static/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/static/admin/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/static/admin/css/animate.min.css" rel="stylesheet">
    <link href="/static/admin/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="/static/admin/css/style.min.css?v=4.1.0" rel="stylesheet">
    <!-- Sweet Alert -->
    <link href="/static/admin/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">

                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="commentForm" method="post" action="{:url('findgroup/addgroup')}" enctype="multipart/form-data">
                        <div class="ibox-title">
                            <h5>创建群组</h5>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">群组名称：</label>
                            <div class="col-sm-4">
                                <input id="name" type="text" class="form-control" name="groupname" required="" aria-required="true">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">群组头像：</label>
                            <div class="col-sm-6">
                                <input id="avatar" type="file"  name="avatar" required="" aria-required="true">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">成员ID：</label>
                            <div class="col-sm-9">
                            	<div class="col-sm-6" style="margin-left:-15px">
                                	<input id="ids" type="text" class="form-control" name="ids" required="" aria-required="true" placeholder="请点击右侧按钮选择">
                                </div>
                                <div class="col-sm-6">
                                	<button type="button" class="btn btn-outline btn-primary" id="showuers">选择成员</button>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-3">
                                <input type="submit" value="提交" class="btn btn-primary"/>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 拉取成员 -->
<div class="zTreeDemoBackground left" style="display: none" id="users">
    <div class="form-group">
        <div class="col-sm-5 col-sm-offset-2">
            <ul id="treeType" class="ztree"></ul>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-4 col-sm-offset-4" style="margin-bottom: 15px">
            <input type="button" value="确认添加" class="btn btn-primary" id="postform"/>
        </div>
    </div>
</div>
<script type="text/javascript">
    zNodes = '';
</script>
<script src="/static/admin/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/admin/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/static/admin/js/content.min.js?v=1.0.0"></script>
<script src="/static/admin/js/plugins/layer/layer.min.js"></script>
<script src="/static/admin/js/jquery.form.js"></script>
<link rel="stylesheet" type="text/css" href="/static/admin/js/plugins/zTree/zTreeStyle.css" />
<script type="text/javascript" src="/static/admin/js/plugins/zTree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="/static/admin/js/plugins/zTree/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="/static/admin/js/plugins/zTree/jquery.ztree.exedit-3.5.js"></script>
<script type="text/javascript">

    //建立WebSocket通讯
    var socket = new WebSocket('ws://175.24.105.249:7272');

    $(document).ready(function(){
        var options = {
            beforeSubmit:showStart,
            success:showSuccess
        };
        $('#commentForm').submit(function(){
            $(this).ajaxSubmit(options);
            return false;
        });

    });
    var index = '';
    function showStart(){
        index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
        return true;
    }
    function showSuccess(data){
        layer.close( index );
        if( 1 == data.code ){

            var add_data = data.data;
            socket.send( add_data ); //发送socket

            layer.alert( data.msg, {'icon' : 1}, function(){
                
                var index2 = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index2); //再执行关闭
            });
        }else{
            layer.alert( data.msg, {'icon' : 2} );
        }
    }
    
    var index3 = '';
    var index4 = '';
    //选择成员
    $("#showuers").click(function(){
    	//加载层
        index4 = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
        $.getJSON("{:url('findgroup/getusers')}", function(res){
        	layer.close(index4);
        	if(res.code == 1){
                zNodes = JSON.parse(res.data);  //将字符串转换成obj

                //页面层
                index3 = layer.open({
                    type: 1,
                    area:['350px', '300px'],
                    title:'选择成员',
                    skin: 'layui-layer-demo', //加上边框
                    content: $('#users')
                });
               
                //设置zetree
                var setting = {
                    check:{
                        enable:true
                    },
                    data: {
                        simpleData: {
                            enable: true
                        }
                    }
                };

                $.fn.zTree.init($("#treeType"), setting, zNodes);
                var zTree = $.fn.zTree.getZTreeObj("treeType");
                //zTree.expandAll(true);
               
            }else{
                layer.alert(res.msg, {'icon' : 2});
            }
        })
    });
    
  	//确认选择用户
    $("#postform").click(function(){
    	
        var zTree = $.fn.zTree.getZTreeObj("treeType");
        var nodes = zTree.getCheckedNodes(true);
        var NodeString = '';
        $.each(nodes, function (n, value) {
           
            if( value.id > 0 ){
            	NodeString += value.id + ',';
            }
        });
        $("#ids").val( NodeString.substring(0, NodeString.length-1) );
        layer.close( index3 );
    })
   
</script>
</body>
</html>